<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			tr td{
				border-right: 1px solid whitesmoke;
			}
			tr td{
				width:120px;
				height:38px;
				text-align: center;
			}
			.box{
				width:500px;
				margin:0 auto;
			}
			.zero{
				background-color :lightskyblue;
				
				font: "微软雅黑";
				color:white;
			}
			
			
		</style>
	</head>

	<body>
		<div class="box">
		<table  >
			<tr class="zero" >
			<td>序号</td>
			<td>姓名</td>
			<td>课程</td>
			<td>成绩</td>
		</tr>
		<tbody id="marks">
			<tr>
			<td>1</td>
			<td>吕不韦</td>
			<td>语文</td>
			<td>100</td>
		</tr>
		<tr >
			<td>2</td>
			<td>吕布</td>
			<td>日语</td>
			<td>100</td>
		</tr>
		<tr>
			<td>3</td>
			<td>吕蒙</td>
			<td>营销学</td>
			<td>100</td>
		</tr>
		<tr >
			<td>4</td>
			<td>吕尚</td>
			<td>数学</td>
			<td>100</td>
		</tr>
		<tr >
			<td>5</td>
			<td>吕雉</td>
			<td>英语</td>
			<td>100</td>
		</tr>
		<tr >
			<td>6</td>
			<td>吕超</td>
			<td>体育</td>
			<td>100</td>
		</tr>
		</tbody>
		
		</table>
		</div>
		<script>
	/*		var single=document.getElementsByClassName("single");
			var double1=document.getElementsByClassName("double");
			
//			single.onmouseover=showColor;
//			single.onmouseout=hideColor;
			
			
			single.onmouseover=function (){
				this.style.backgroundColor="while";
			}
			single.onmouseout function (){
				this.style.backgroundColor="lightgray";
			}
			
			double1.onmouseover=function (){
				this.style.backgroundColor="while";
			}
			double1.onmouseout=function (){
				this.style.backgroundColor="grey";
			}
	*/
		 var mk = document.getElementById("marks");
       	 var trArr = mk.children;
      
        for(var i=0;i<trArr.length;i++){
            if(i%2!==0){
                trArr[i].style.backgroundColor = "grey";
            }else{
                trArr[i].style.backgroundColor = "lightgray";
            }

            var color = "";
            trArr[i].onmouseover = function () {
                color = this.style.backgroundColor;
                this.style.backgroundColor = "while";
            }
            trArr[i].onmouseout = function () {
                this.style.backgroundColor = color;
            }
        }
			
			
		</script>
	</body>

</html>